<template>
  <div class="demo-badge">
    <div title="基本用法">
      <pl-badge :data="12">
        <pl-button label="消息"/>
      </pl-badge>
    </div>

    <div title="颜色">
      <pl-badge :data="12" status="primary">
        <pl-button label="消息"/>
      </pl-badge>
      <pl-badge :data="12" status="warn">
        <pl-button label="消息"/>
      </pl-badge>
      <pl-badge :data="12" status="success">
        <pl-button label="消息"/>
      </pl-badge>
      <pl-badge :data="12" status="error">
        <pl-button label="消息"/>
      </pl-badge>
      <pl-badge :data="12" status="info">
        <pl-button label="消息"/>
      </pl-badge>
    </div>

    <div title="位置">
      <pl-badge :bottom="false" :data="12" :start="true">
        <pl-button label="消息"/>
      </pl-badge>
      <pl-badge :bottom="false" :data="12" :start="false">
        <pl-button label="消息"/>
      </pl-badge>
      <pl-badge :bottom="true" :data="12" :start="true">
        <pl-button label="消息"/>
      </pl-badge>
      <pl-badge :bottom="true" :data="12" :start="false">
        <pl-button label="消息"/>
      </pl-badge>
    </div>

    <div title="只要小红点">
      <pl-badge dot>
        <pl-button label="消息"/>
      </pl-badge>
    </div>

    <div title="最大值">
      <pl-badge :data="200" :max="99">
        <pl-button label="消息"/>
      </pl-badge>
    </div>
  </div>
</template>

<script>
  export default {
    name: "badge-demo"
  }
</script>

<style lang="scss" scoped>

</style>
